Створення web-сторінок з використанням фреймів, навігаційних панелей, та таблиць стилів(CSS).
Теоретичні відомості.
Фрейми.
Поняття про фрейми. Якщо матеріали web-сайту структуризовані логічно за темами і мають базуватися на декількох сторінках з навігацією за допомогою гіперпосилань, то такий сайт реалізовують із застосуванням фреймів. Фрейм у перекладі з англійської означає кадр, рамка, прямокутна область. Фрейми поділяють вікно броузера на частини, в яких відображають зміст сторінок сайту. Кожній сторінці має відповідати свій html-файл. Кожна сторінка повинна мати логічний заголовок.
Наприклад, типовим є сайт, де вікно броузера поділене на дві вертикальні області. У вужчій (до 25% від ширини вікна броузера) лівій області відображають зміст сайту у вигляді гіперпосилань на конкретні сторінки, а в іншій - вибрану користувачем сторінку. Такий підхід до конструювання сайту дає змогу постійно бачити зміст сайту і переглядати його сторінки у будь-якій послідовності. Зміст чи у цьому випадку увесь лівий фрейм називають навігаційною панеллю. Навігаційну панель можна створити у верхній частині вікна броузера, справа чи де завгодно. Часто у верхній частині створюють третій вузький фрейм, де розташовують заголовок сайту, логотип фірми, рекламу, елементи WordArt, ActiveX чи Flash тощо.
Важливо на етапі конструювання сайту заздалегідь продумати фреймову структуру, визначитися з кількістю фреймів, їхніми розмірами, розташуванням і стартовим виглядом.
Файлова структура сайту з фреймами. Для створення сайту із застосуванням фреймів потрібно скласти як мінімум три html-файли: один основний і два чи більше допоміжні. Один допоміжний файл потрібний для заповнення стартовою інформацією лівого фрейму, інший - правого. Основний файл призначений для опису розташування фреймів у вікні броузера. Тут описується структура фреймів, зазначаються адреси html-файлів для кожного фрейму, а також пояснюється, що має відображатися на екрані, якщо якийсь давній броузер не підтримує фреймів.
Основний html-файл. Оскільки основний файл запускає сайт, то його прийнято називати index.html.
Приклад 1. Розглянемо типовий вигляд основного файла:
<HTML>
<HEAD>
<ТІТLЕ>Це мій сайт з фреймами </TITLE>
</HEAD>
<FRAMESET COLS="25% ,75% ">
<FRAME SRC"leftframe.html"
NAME= "left"
<!--або "лівий" або інша назва фрейму->
SCROLLING="no"
<!-або "yes" або "auto"-->
FRAMEBORDER="1"
<!--або "О" межа фреймів є чи ні-->
BORDER = "15" <!--товщина межі-->
MARGINHIGHT= "10"
'<!-- відступи від країв-->
MARGINWIDTH="10"
NORESIZE
<!—не можна пересувати межу-->
BORDERCOLOR = "red" >
<FRAME SRC - "rightframe.html"
NAME="right" <!--або "правий" тощо--> </FRAMESET>
<NOFRAME> <!--Текст, що відображатиметься у броузері, який не підтримує фреймів, наприклад:-->
Вибачте, цей сайт містить фрейми. Скористайтесь іншим броузером для його перегляду.
</NOFRAME>
</HTML>
Пояснимо дію використаних тегів та їхніх параметрів. Для поділу вікна броузера на декілька частин використовують тег-контейнер
<FRAMESET параметри>... </FRAMESET>
Параметрів є два: COLS і ROWS. Параметр COLS призначений для поділу вікна на вертикальні області (колонки), а ROWS - на горизонтальні. Розміри областей задають у відсотках до всього вікна, фіксовані - у пікселях. Наприклад, COLS = "25%, 75%" означає, що лівий фрейм займатиме чверть вікна на будь-якому моніторі.
Можна писати також COLS = "1*, 3*", де 1* саме тут означає одну з чотирьох частин екрана, або COLS = "2*, З*", де 2* означає дві з п'яти вертикальних частин екрана.
У фіксованому заданні COLS = "100,*", число 100 означає 100 пікселів, а * - решту екрана.
Більш складні конфігурації фреймів створюють шляхом поділу на фрейми деякого раніше створеного фрейму. У цьому випадку теги FRAMESET вкладають один в одний, наприклад, так:
<FRAMESET COLS - "25%, 75% ">
<FRAME описуємо лівий фрейм>
<FRAMESET ROWS= "25%, 75% >
<FRAME описуємо верхній правий фрейм>
<FRAME описуємо нижній правий фрейм>
</FRAMESET>
</FRAM...